<template>
	<button class="six-button" :class="buttonType" @click="onClick">
		<div class="six-button-wrapper">
			<slot></slot>
		</div>
	</button>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			default: 'default'
		},
		size: {
			type: String,
			default: 'large'
		},
		disabled: Boolean,
		to: [String, Object]
	},
	computed: {
		buttonType () {
			return `six-button-${this.type} six-button-${this.size}`
		}
	},
	methods: {
		onClick () {
			!this.disabled && this.go(this.to, this.$router)
		},
		go (url, $router) {
		if (/^javas/.test(url) || !url) return
		  const useRouter = typeof url === 'object' || ($router && typeof url === 'string' && !/http/.test(url))
		  if (useRouter) {
		    if (typeof url === 'object' && url.replace === true) {
		      $router.replace(url)
		    } else {
		      url === 'BACK' ? $router.go(-1) : $router.push(url)
		    }
		  } else {
		    window.location.href = url
		  }
		}
	}
}	
</script>

<style scoped>
.six-button {
	width: 100%;
	text-align: center;
	color: #666;
	border-radius: 2px;
	outline: 0;
	appearance: none;
	font-size: 16px;
}
.six-button-large {
	height: 42px;
	line-height: 42px;
}
.six-button-small {
	height: 36px;
	line-height: 36px;
}
.six-button-default {
	background: #fff;
	color: #666;
}
.six-button-default:active {
	background: #f8f8f8 !important;
}
.six-button-primary {
	background: #3884ff;
	color: #fff;
}
.six-button-primary:active {
	background: #2878fa !important;
}
.six-button-danger {
	background: #ff5e5d;
	color: #fff;
}
.six-button-danger:active {
	background: #ff4f4e !important;
}
.six-button-wrapper {
	position: relative;
	height: 100%;
}
.six-button-wrapper * {
	display: inline-block;
	vertical-align: middle;
}
</style>